<template>
  <div class="edit-reply">
    <div class="wrap">
      <span class="text">{{$t('configLazyLoad.channel.mailTip60')}}</span>
      <el-input type="textarea"
                :rows="2"
                :placeholder="$t('public.pleaseEnter')"
                v-model="textarea"></el-input>
    </div>
    <div class="wrap wraptag">
      <span class="text">{{$t('configLazyLoad.channel.mailTip61')}}</span>
      <div class="addtags">
        <span v-for = "(item, index) in tags"
              class="box">{{item.name}}
          <span @click = "delTag(index)">×</span>
        </span>
        <el-input :placeholder="$t('public.pleaseEnter')"
                  v-model.trim="input"
                  :maxlength = "10"
                  size="mini"
                  @blur="addTag(input)"></el-input>
      </div>
    </div>
    <div class="wrap-save">
      <el-button type = "primary"
                 @click = "save"
                 class = "save primary_btn fr">{{$t('public.save')}}</el-button>
    </div>
  </div>
</template>
<script>
  import {deepClone} from '@/utils/m7Utils'
  export default {
    data () {
      return {
        textarea: '',
        input: '',
        tags: []
      }
    },
    methods: {
      save () {
        if (!this.textarea) {
          this.$message.error(this.$t('webchat.quickReplayNotEmpty'))
          return
        }
        let data = {
          moduleType: 'webchat',
          tags: this.tags,
          content: this.textarea
        }
        if (this.dealConten._id) {
          this.tags.map(item => {
            item._id = ''
          })
          data._id = this.dealConten._id
        }
        this.$emit('dealReply', data)
      },
      inti (obj) {
        if (JSON.stringify(obj) === '{}') {
          this.tags = []
          this.textarea = ''
        } else {
          this.tags = obj.tags
          this.textarea = obj.content
        }
      },
      delTag (index) {
        this.tags.splice(index, 1)
      },
      addTag (name) {
        this.input = ''
        let isSame = false
        this.tags.map(item => {
          if (item.name === name) {
            isSame = true
          }
        })
        if (isSame) {
          this.$message.error(this.$t('configLazyLoad.channel.mailTip62'))
          return
        }
        if (name) {
          this.tags.push({
            _id: '',
            name: name
          })
        }
      }
    },
    props: {
      dealConten: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    watch: {
      dealConten (cur) {
        this.inti(deepClone(cur))
      }
    },
    beforeMount () {
      this.inti(deepClone(this.dealConten))
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .edit-reply
    width 67%
    padding 20px 16px
    .wrap-save
      height 30px
      margin-top 12px
    .wraptag
      margin-top 12px
    .wrap
      display flex
      .text
        align-self center
        flex-basis 100px
      .addtags
      .el-textarea
        flex 1
        margin-left 20px
        display inline-block
      .addtags
        .el-input
          width 150px
        .box
          display inline-block
          height 24px
          line-height 24px
          background #cce6ff
          padding 0 6px
          margin 0 16px 10px 0
          span
            color $c-main
            font-size 24px
            float right
            margin-left 10px
            cursor pointer
</style>
